import { Button, Checkbox, Form, Input, Card } from "antd";
import React, { useCallback } from "react";
import { UserOutlined, KeyOutlined } from "@ant-design/icons";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import actions from "@/store/authority/actions";
import { Container } from "./styles";
import { useHistory } from "react-router-dom";
function AppLogin(props) {
  const history = useHistory();
  const { loginAction } = props;
  const handleFinish = useCallback((values) => {
    loginAction(values).then(() => {
      history.push("/");
    });
    console.log("入参", values);
  }, []);
  return (
    <Container>
      <Card title="请登录" bordered={false} style={{ width: 300 }}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          onFinish={handleFinish}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="username"
            validateTrigger="onBlur"
            rules={[
              { required: true, message: "用户名必填!" },
              { max: 20, message: "最多20个字符！" },
            ]}
          >
            <Input
              prefix={<UserOutlined className="form-prefix-icon" />}
              placeholder="请输入用户名（邮箱地址）！"
            />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            validateTrigger="onBlur"
            rules={[
              { required: true, message: "密码必填!" },
              { min: 6, message: "最小6位！" },
            ]}
          >
            <Input.Password
              prefix={<KeyOutlined />}
              placeholder="请输入密码!"
            />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </Container>
  );
}
export default connect(null, (dispatch) =>
  bindActionCreators(actions, dispatch)
)(AppLogin);
